<script setup lang="ts">
import { IActionParam, IParam } from "@interface";
import { getViewRuntimeParam, useContextParams } from "@core";
import { Subject } from "rxjs";
import { onMounted, Ref, ref } from "vue";
import { AppIndexViewLayout } from "@components";
import { viewMounted } from "@core/modules/views/index-view-help";
import { AppMenu } from "../../widgets";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined
} from '@ant-design/icons-vue';
interface ViewProps {
  /**
   * 上下文参数
   */
  contextProp: any;

  /**
   * 视图参数
   */
  viewParamsProp?: any;

  /**
   * 视图打开方式，路由、模态、内嵌，默认为路由方式
   */
  openTypeProp?: "ROUTE" | "MODAL" | "EMBED";

  /**
   * 视图状态通讯对象(单个视图（路由为顶层视图）)
   */
  viewState?: any;

}
interface ViewEmit {
  (name: "CLOSE", value: IActionParam): void;
  (name: "VIEWCHANGE", value: IActionParam): void;
}
const props = withDefaults(defineProps<ViewProps>(), {
  openTypeProp: "ROUTE",
  viewState: new Subject<IActionParam>(),
});
const emit = defineEmits<ViewEmit>();
const { context, viewParams } = useContextParams(props);
const viewCaption: Ref<string> = ref("首页视图");
const collapsed :Ref<boolean> = ref(false);

/**
 * @description 模型参数
 */
const modelParam: any = {
  menuName: 'menu'
};

const menu = ref(null);

/**
 * @description 运行时参数
 */
const runtimeParam: IParam = {
  context: context,
  viewParams: viewParams,
  viewState: props.viewState,
};

onMounted(() => {
  viewMounted(modelParam, getViewRuntimeParam(runtimeParam, {
    menu: menu
  }));
});
</script>

<template>
  <AppIndexViewLayout class="index-view" menuAlign="LEFT" :collapsed="collapsed">
    <template #header>
      <div class="index-view-header">
        {{viewCaption}}
        <MenuUnfoldOutlined
          v-if="collapsed"
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <MenuFoldOutlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
      </div>
    </template>
    <template #user>

    </template>
    <template #menu>
      <AppMenu 
        ref="menu"
        name="menu"
        menuAlign="LEFT"
        :viewState="viewState"
        :contextProp="context"
        :viewParamsProp="viewParams">
      </AppMenu>
    </template>
    <template #content>
      <router-view />
    </template>
  </AppIndexViewLayout>
</template>

<style lang="less">
.index-view {
  .index-view-header {
    font-size: 18px;
    >.trigger:hover {
      color: #1890ff;
    }
  }
}
</style>